<template>
	<view>
		<view class="list_con u-border-bottom">
			<text class="dis_inl_blo circle"></text>
			<text style="color:#0c838b;">主要内容</text>
		</view>
		<view class="list_con list_con1 u-border-bottom">
			<text class="va_m">标题</text>
			<input v-model="title" class="dis_inl_blo va_m" style="width:70%;margin-left:20rpx;" type="text" placeholder="请输入标题名称">
		</view>
		<view class="list_con list_con1 u-border-bottom u-rela" @click="show=true">
			<text class="u-abso pos_left">是否热门</text>
			<u-select class="u-abso pos_right" v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
			<text style="right:60rpx;" class="u-abso pos_right">{{label}}</text>
			<u-icon style="top:25rpx;" class="u-abso pos_right" size="30" color="#999" name="arrow-right"></u-icon>
		</view>
		<view class="list_con list_con1 u-border-bottom u-rela" @click="showtype=true">
			<text class="u-abso pos_left">收费类型</text>
			<u-select class="u-abso pos_right" v-model="showtype" mode="single-column" :list="listtype" @confirm="confirmtype"></u-select>
			<text style="right:60rpx;" class="u-abso pos_right">{{labeltype}}</text>
			<u-icon style="top:25rpx;" class="u-abso pos_right" size="30" color="#999" name="arrow-right"></u-icon>
		</view>
		<view class="list_con list_con1">
			<text class="va_m">收费价目</text>
			<input v-model="price" class="dis_inl_blo va_m" style="width:70%;margin-left:20rpx;" type="text" placeholder="请填写收费价格,免费请输入0或不填">
		</view>
		<view class="list_con u-margin-top-20">
			<text>封面图</text>
			
			<u-upload :action="action" @on-success="successimg" @on-remove="deletePic" maxCount="1"></u-upload>
		</view>
		<view class="list_con u-border-bottom u-margin-top-20">
			<text class="dis_inl_blo circle"></text>
			<text style="color:#0c838b;">辅助内容</text>
		</view>
		<view class="list_con list_con1">
			<text class="va_m">主办方</text>
			<input v-model="sponsor" class="dis_inl_blo va_m" style="width:70%;margin-left:20rpx;" type="text" placeholder="请输入主办方">
		</view>
		<view class="list_con list_con1">
			<text class="va_m">活动地址</text>
			<input v-model="address" class="dis_inl_blo va_m" style="width:70%;margin-left:20rpx;" type="text" placeholder="请输入活动地址">
		</view>
		<view class="list_con list_con1">
			<text class="va_m">联系方式</text>
			<input v-model="contact" class="dis_inl_blo va_m" style="width:70%;margin-left:20rpx;" type="text" placeholder="请输入联系方式">
		</view>
		<view class="list_con list_con1">
			<text class="va_m">限制人数</text>
			<input v-model="person" class="dis_inl_blo va_m" style="width:70%;margin-left:20rpx;" type="text" placeholder="请填写限制人数，请填写整数">
		</view>
		<view class="list_con list_con1" @click="showtimec(1)">
			<text class="va_m">活动开始时间</text>
			<input class="dis_inl_blo va_m" v-model="starttime" style="width:70%;margin-left:20rpx;" type="text" placeholder="请填写活动开始时间">
		</view>
		<view class="list_con list_con1" @click="showtimec(2)">
			<text class="va_m">活动结束时间</text>
			<input class="dis_inl_blo va_m" v-model="endtime" style="width:70%;margin-left:20rpx;" type="text" placeholder="请填写活动结束时间">
		</view>
		<view class="list_con">
			<text>注意事项</text>
			<textarea v-model="matter" value="" placeholder="请简述注意事项" />
		</view>
		<view class="list_con u-margin-top-20">
			<text>编辑活动内容</text>
		</view>
		<!-- 编辑富文本 -->
		<view style="overflow: hidden !important;border:1rpx solid #ddd;">
			<cu-editor ref="editor" :url="uploadUrl" :header="header" :formData="formData" :content="content" @before="onUploadBefore" @update="onUpdate" @save="onSave"></cu-editor>
		</view>
		
		<button class="btn_con" @click="releaseActive">发布</button>
		<u-picker mode="time" v-model="showtime" :params="params" @confirm="confirmtime"></u-picker>
		<!-- 弹框提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import cuEditor from '@/components/cu-editor/cu-editor'
	import { handleHtmlImage } from '@/components/cu-editor/util'
	import {
		releaseActive
	} from "@/service/indexService.js";
	import {
		getPatrolDetail,
		examinePatrol
	} from "@/service/patrolService.js";
	export default {
		components: {
		  cuEditor
		},
		data () {
			return {
				show:false,
				showtype:false,
				showtime:false,
				timetype:1,
				list: [
					{
						value: '0',
						label: '是'
					},
					{
						value: '1',
						label: '否'
					}
				],
				listtype: [
					{
						value: '0',
						label: '免费'
					},
					{
						value: '1',
						label: '收费'
					}
				],
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				starttime:'',
				endtime:'',
		
				value:0,
				typevalue:0,
				label:'是',
				labeltype:'免费',
				image:'',
				fileList:[],
				action:'https://admin.gslhzhwy.com/api/upload/file',
				
				
				content: '',
				uploadUrl: 'https://admin.gslhzhwy.com/api/upload/file',
				header: {},
				formData: {},
				
				id:0,
				title:'',
				price:'',
				sponsor:'',
				matter:'',
				address:'',
				contact	:'',
				person:''
			}
		},
		onLoad(options) {
			
		},
		methods:{
			
			confirm(e) {
				this.value=e[0].value
				this.label=e[0].label;
				if(e[0].value==1){
					this.color='#38a253';
				}else{
					this.color='#b92518';
				}
			},
			confirmtype(e) {
				this.typevalue=e[0].value
				this.labeltype=e[0].label;
			},
			successimg:function(e){
				if (e.code == 1) {
					this.image=e.data.url;
				}
			},
			// 删除图片
			deletePic(event) {
				this.image='';
			},
			showtimec:function(type){
				this.showtime=true,
				this.timetype=type
			},
			confirmtime:function(e){
				let time=e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second;
				if(this.timetype==1){
					this.starttime=time
				}else{
					this.endtime=time
				}
			},
			
			onUploadBefore: function() {
				this.formData = {
					timestamp: (Date.parse(new Date())) / 1000
				}
			},
			onUpdate(res) {
				
			},
			//保存
			onSave(e) {
				let html = e.html
				html = handleHtmlImage(html)
				this.content=e.html
			
			},
			releaseActive:function(){
				releaseActive({
					nid:this.id,
					title:this.title,
					is_hot:this.value,
					type:this.typevalue,
					price:this.price,
					image:this.image,
					sponsor:this.sponsor,
					address:this.address,
					contact:this.contact,
					person:this.person,
					time:this.starttime,
					end_time:this.endtime,
					matter:this.matter,
					content:this.content
				}).then(res=>{
					if(res.code==200){
						this.$refs.uToast.show({
							type: 'success',
							title: '发布成功',
							icon:false
						})
						setTimeout(function(){
							uni.navigateBack()
						},2000)
						
					}else{
						this.$refs.uToast.show({
							type: 'error',
							title: res.msg,
							icon:false
						})
					}
				});
			},
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f2f2f2;
	}
	.list_con{
		padding:20rpx;
		background-color: #fff;
	}
	.list_con1{
		height:80rpx;
	}
	.circle{
		width:15rpx;
		height:15rpx;
		margin-right:20rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #0c838b;
	}
	.list_con textarea{
		width:93%;
		height:150rpx;
		padding:20rpx;
		margin-top:10rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		border:1rpx solid #ddd;
	}
	
	.fixed-top.isFixed.data-v-7b039d96{
		position: static !important;
		// top:115rpx !important;
		// width:93% !important;
	}
	scroll-view.data-v-7b039d96{
		height:600rpx !important;
	}
	.fixed-bottom.data-v-7b039d96{
		display: block !important;
		position: static !important;
	}
	
	.btn_con{
		width:90%;
		height:70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		border-radius: 35rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png');
		background-size: 100% 70rpx;
		color:#fff;
		margin:70rpx auto 20rpx;
	}
	
	.pre-box {
		margin-top:20rpx;
	}
	
	.pre-item {
		// flex: 1;
		display: inline-block;
		border-radius: 10rpx;
		width:200rpx;
		height: 200rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
		margin-left:10rpx;
	}
	
	.pre-item-image {
		width: 100%;
		height: 100%;
	}
</style>

